function sendToBack(type, data, callback) {
	var message = {
		type : type,
		data : data
	};
	if (chrome && chrome.extension){
		chrome.extension.sendMessage(message, callback || function(){});
	}
}
function changeState(enable){
	var elem = document.getElementById("toggle");
	if(enable){
		elem.src = "images/enable_button.png";
		elem.setAttribute("data-enable", "true");
	}else{
		elem.src = "images/disable_button.png";
		elem.setAttribute("data-enable", "false");
	}
}


function toggle(){
	var enable = this.getAttribute("data-enable");
	if (enable == "false"){
		sendToBack("disable");
		changeState(true);
	}else{
		sendToBack("enable");
		changeState(false);

	}
}

var nameInput;
function edit(e){
	var action = this.getAttribute("data-action");
	if(action == "save"){
		var nameText = document.getElementById("name");
		nameText.innerText = nameInput.value || this.getAttribute("data-oldname");
		this.innerText = "edit";
		this.setAttribute("data-action", "edit");
		this.parentElement.removeChild(nameInput);
		this.parentElement.firstChild.style.display = "";
		sendToBack("updateUser", {name: nameText.innerText});
	}else{
		nameInput = document.createElement("input");
		nameInput.type = "text";
		//nameInput.value = his.parentElement.firstChild.innerText;
		this.innerText = "save"
		this.setAttribute("data-action", "save");
		this.setAttribute("data-oldname", this.parentElement.firstChild.innerText);
		this.parentElement.firstChild.style.display = "none";
		this.parentElement.appendChild(nameInput);
		nameInput.focus();
	}
}
function buildOtherUser(user){
	var d = document.createElement("div");
	var checkbox = document.createElement("input");
	checkbox.type = "checkbox";
	checkbox.checked = !user.disabled;
	checkbox.setAttribute("data-uid", user.id);
	checkbox.className = "userCheckbox";
	d.appendChild(checkbox);
	
	var nameSpan = document.createElement("span");
	nameSpan.innerText = user.name;
	d.appendChild(nameSpan);
	
	var remove = document.createElement("a");
	remove.innerText = "remove";
	remove.href = "#";
	remove.className = "removeUser";
	d.appendChild(remove);
	return d;
	
}
var disabledUsers;
var newColor;

function updateUser(){
	enableApply(true);
	disabledUsers = {}
	if (this.checked){
		disabledUsers[this.getAttribute("data-uid")]=false;
	}else{
		disabledUsers[this.getAttribute("data-uid")]=true;
	}
}

function buildOtherUsersList(userList){
	if (userList && userList.length > 0){
		var usersDiv = document.getElementById("otherUsers");
		usersDiv.style.display = "block";
		for (var i=0; i< userList.length; i++){
			usersDiv.appendChild(buildOtherUser(userList[i]));
		}
		var checkElems = document.getElementsByClassName("userCheckbox");
		for (var i=0; i< checkElems.length; i++){
			checkElems[i].onclick = updateUser;
		}
	}
}

function enableApply(enable){
	if (enable){
		document.getElementById("apply").src = "images/apply_button.png";
	}else{
		document.getElementById("apply").src = "images/apply_dis_button.png";
	}
}

function applyChanges(){
	sendToBack("disableTabUsers", disabledUsers);
	sendToBack("updateUser", {color: newColor});
	enableApply(false);
}
function init(){
	sendToBack("isEnabled","",function(isEnabled){
		changeState(!isEnabled);
	});
	sendToBack("getUser","",function(user){
		document.getElementById("name").innerText = user.name;
		document.getElementById("selectedColor").style.backgroundColor = user.color;
		
	});
	sendToBack("getTabUsersList","",function(userList){
		buildOtherUsersList(userList);
	});
	document.getElementById("toggle").onclick = toggle;
	document.getElementById("apply").onclick = applyChanges;
	var editElems = document.getElementsByClassName("editUser");
	for (var i=0; i< editElems.length; i++){
		editElems[i].onclick = edit;
	}
	
}

DropDown.prototype = {
    initEvents : function() {
        var obj = this;
		
		function getIndex(listElement){
			var parent = listElement.parentElement;
			for (var i=0; i< parent.children.length; i++){
				if (parent.children[i] == listElement){
					return i;
				}
			}
		}
		
		
		function onOptsClick(e){
            var opt = this;
			newColor = getColor(this, e.x);
            obj.color.style.backgroundColor = newColor;
			enableApply(true);
			
        }
		
		function getColor(gradElem, clickOffset){
			var style = getComputedStyle(gradElem);
			var width = parseInt(style.width);
			var startColor = [239, 224,7];
			var endColor = [255, 113,5];
			var grad = [(endColor[0]-startColor[0])/width, (endColor[1]-startColor[1])/width, (endColor[2]-startColor[2])/width];
			var colorGap = [grad[0]*clickOffset, grad[1]*clickOffset, grad[2]*clickOffset];
			var decColor = [Math.round(startColor[0] + colorGap[0]), 
							Math.round(startColor[1] + colorGap[1]),
							Math.round(startColor[2] + colorGap[2])];
			return "rgb(" + decColor.join(",") + ")";
			
		}
		
		function toggleClass(name, elem){
			var nameRE = new RegExp(name);
			if (nameRE.test(elem.className)){
				elem.className = elem.className.replace(nameRE, "");
			} else{
				elem.className += " " + name;
			}
		}
		
		function ddOnClick(){
			toggleClass('active', this);
		}
 
        obj.dd.onclick = ddOnClick;
		
		for (var i=0; i< obj.opts.length; i++){
			obj.opts[i].onclick = onOptsClick;
		}
    },

}


function DropDown(el) {
    this.dd = el;
    this.color = this.dd.firstElementChild.firstElementChild;
    this.opts = this.dd.getElementsByClassName("dropdown")[0].children;
    this.initEvents();
}

var d = new DropDown(document.getElementById("dd"));
init();